<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>消息列表</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/public_win.css" rel="stylesheet" type="text/css">
    <link href="../../css/public.css" rel="stylesheet" type="text/css">
    <style>
        html,
        body {
            height: 100%;
            background: #F7F8FA;
        }

        .vueApp {
            min-height: 100%;
            height: auto;
        }

        .message_list {
            padding: 0 0.75rem 0.75rem;
        }

        .message_list .message_item {
            margin-top: 0.75rem;
            width: 100%;
            height: auto;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0.05rem 0.4rem 0 rgba(0, 0, 0, 0.03);
            border-radius: 0.3rem;
            padding: 0 0.75rem;
            position: relative;
        }

        .message_list .message_item .message_title {
            font-size: 0.8rem;
            color: rgba(34, 34, 36, 1);
            line-height: 1.3rem;
            padding-top: 0.5rem;
        }

        .message_list .message_item .message_title span {
            position: absolute;
            top: 0.3rem;
            left: 0.3rem;
            width: 0.3rem;
            height: 0.3rem;
            background: rgba(221, 72, 72, 1);
            border-radius: 100%;
        }

        .message_list .message_item .message_content {
            font-size: 0.6rem;
            color: rgba(181, 182, 186, 1);
            line-height: 0.9rem;
            padding-top: 0.2rem;
            margin-bottom: 0.7rem;
            align-items: center;
        }

        .message_list .message_item .message_content img {
            display: inline-block;
            width: 0.7rem;
            height: 0.7rem;
            margin: 0.1rem 0;
        }

        .message_list .message_item .message_info {
            height: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }

        .message_list .message_item .message_info:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 0.05rem;
            width: 100%;
            background: #E7E6E6;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
            transform-origin: left top;
            -webkit-transform-origin: left top;
        }

        .message_list .message_item .message_info span {
            font-size: 0.6rem;
            color: rgba(151, 152, 153, 1);
            line-height: 1.6rem;
            flex: 1;
        }

        .message_list .message_item .message_info img {
            width: 0.5rem;
            height: 0.5rem;
        }

        .add_message {
            position: fixed;
            bottom: 2rem;
            width: 2.5rem;
            height: 2.5rem;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="message_list">
            <div class="message_item" v-for="item,index in listData" tapmode @click="fnOpenMessageDetail(index,item.id,item.messageTypeCode,item.bussTableId,item.consultInfo||'')">
                <p class="message_title overflow_hidden_one"><span v-if="item.ifRead=='0'"></span>{{item.title}}</p>
                <p class="message_content overflow_hidden_two" v-html="status=='4'?transEmo(item.context.replace(/\n/g,'<br>')):item.context.replace(/<[^>]+>/g, '').replace(/\n/g,'<br>')"></p>
                <div class="message_info">
                    <span>{{item.createDate|fnSetDate}}</span>
                    <img v-if="item.messageTypeCode!='52'" src="../../image/mine/go_page.png" alt="">
                </div>
            </div>
        </div>
        <div v-if="listData.length=='0'">
            <div class="no_data">
                <img src="../../image/no_page/no_message.png" alt="">
                <p>静静等待消息降临～</p>
            </div>
        </div>
    </div>
</body>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        fnInit();
        fnInitPage();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                status: api.pageParam.status || "",
                listData: [],
                pageNo: "1",
                isLoad: false
            }
        })
    }

    function fnInitPage() {
        fnGetMessList();
        fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
            fnGetMessList('headerRefreshing');
        });

        fnAddFooterLoadingEvent(function() { // 设置上拉加载
            fnGetMessList('load');
        });

    }

    function fnGetMessList(pSign) {
        if (pSign != "load") { //刷新
            if (pSign != "headerRefreshing") {
                $S.ShowProgress();
            }
            vm.pageNo = 1;
        } else { //加载
            $S.ShowProgress();
        }
        var postData = {
            "messType": vm.status,
            "userType": "1",
            "pageNo": vm.pageNo,
            "pageSize": "10"
        }
        $S.POST("apiAppMessage/findMessageInfoList", postData, function(ret, err) {
            if (ret && ret.status == "200") {
                if (vm.pageNo == '1') {
                    vm.listData = [];
                }
                vm.listData.push.apply(vm.listData, ret.data.listData);
                vm.pageNo++;
            }
            $S.CloseProgress();
            api.refreshHeaderLoadDone();
            vm.isLoad = true;
        })
    }


</script>

</html>
